<template>
  <div>
    <van-button type="button" @click="startRecordAudio">开始录音</van-button>
    <h3>录音时长：{{ recorder.duration.toFixed(4) }}</h3>
    <br />
    <van-button type="button" @click="stopRecordAudio">停止录音</van-button>
    <van-button type="button" @click="playRecordAudio">播放录音</van-button>
    <van-button type="button" @click="handlePausePlay">暂停播放</van-button>
    <van-button type="button" @click="handlePause">暂停录音</van-button>
    <van-button type="button" @click="getPCBRecordAudioData">获取PCB录音数据</van-button>
    <van-button type="button" @click="downloadPCBRecordAudioData">下载PCB录音文件</van-button>
    <van-button type="button" @click="getWAVRecordAudioData">获取WAV录音数据</van-button>
    <van-button type="button" @click="downloadWAVRecordAudioData">下载WAV录音文件</van-button>
    <!-- <van-button type="button" @click="uploadWAVData">上传WAV录音数据</van-button> -->
    <br />
  </div>
</template>
 
<script setup>
import Recorder from "js-audio-recorder";
import { reactive } from "vue";
// import { uploadWavData } from "@/api/system/audioRecorder";



const recorder = ref()
recorder.value = new Recorder({
  sampleBits: 16, // 采样位数，支持 8 或 16，默认是16
  sampleRate: 16000, // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000
  numChannels: 2, // 声道，支持 1 或 2， 默认是1
  // compiling: false,(0.x版本中生效,1.x增加中)  // 是否边录边转换，默认是false
})


// onMounted()

  //开始录音
  const startRecordAudio = () => {
    Recorder.getPermission().then(
      () => {
        console.log("给权限了",recorder.value.duration.toFixed(4));
        alert("给权限了")
        recorder.value.start(); // 开始录音
      },
      (error) => {
        console.log("请先允许该网页使用麦克风");
        console.log(`${error.name} : ${error.message}`);
      }
    );
  }
  //停止录音
  const stopRecordAudio = () => {
    console.log("停止录音",recorder);
    recorder.value.stop();
  }
  //播放录音
  const playRecordAudio = () => {
    console.log("播放录音");
    recorder.value.play();
  }
  // 暂停播放
  const handlePausePlay = () => {
    console.log("暂停播放");
    recorder.value.pausePlay();
  }
  //继续录音
  const handlePause = () => {
    console.log("继续录音");
    recorder.value.pause();
  }
  //获取PCB录音数据
  const getPCBRecordAudioData = () => {
    var pcmBlob = recorder.value.getPCMBlob();
    console.log(pcmBlob);
  }
  //获取WAV录音数据
  const getWAVRecordAudioData = () => {
    var wavBlob = recorder.value.getWAVBlob();
    console.log(wavBlob);
  }
  //下载PCB录音文件
  const downloadPCBRecordAudioData = () => {
    recorder.value.downloadPCM("badao");
  }
  //下载WAV录音文件
  const downloadWAVRecordAudioData = () => {
    recorder.value.downloadWAV("badao");
  }
  //上传wav录音数据
  // uploadWAVData() {
  //   var wavBlob = this.recorder.getWAVBlob();
  //   // 创建一个formData对象
  // var formData = new FormData()
  //   // 此处获取到blob对象后需要设置fileName满足当前项目上传需求，其它项目可直接传把blob作为file塞入formData
  //   const newbolb = new Blob([wavBlob], { type: 'audio/wav' })
  //   //获取当时时间戳作为文件名
  //   const fileOfBlob = new File([newbolb], new Date().getTime() + '.wav')
  //   formData.append('file', fileOfBlob)
  //   uploadWavData(formData).then((response) => {
  //     console.log(response);
  //   });
  // },

  // watch(recorder,(newValue,oldValue)=>{
  //   console.log(111)
  // }) 

</script>
 
<style scoped lang="scss"></style>